﻿@{
    Layout = null;
    ViewBag.Title = "QQ地图";
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>腾讯地图开放API - 轻快小巧,简单易用!</title>
    <link rel="stylesheet" href="//lbs.qq.com/tool/getpoint/common.css">
    <script src="//lbs.qq.com/tool/getpoint/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="//lbs.qq.com/tool/getpoint/jquery-ui.min.css">
    <script src="//lbs.qq.com/tool/getpoint/jquery-ui-1.10.4.min.js"></script>
    <script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #main {
            height: 553px;
            width: 633px;
            border: 1px solid #5688CB;
            border-top: 0px;
        }

        #tooles {
            height: 23px;
            background: #5688CB;
            position: relative;
            z-index: 100;
            color: white;
        }

        #bside_left {
            width: 0px;
            height: 510px;
            padding: 0xp;
            float: left;
            overflow: auto;
        }

        #cur_city, #no_value {
            height: 20px;
            position: absolute;
            top: 3px;
            left: 10px;
        }

            #cur_city .change_city {
                margin-left: 5px;
                cursor: pointer;
            }


        #level {
            margin-left: 20px;
        }



        .btn, .btn_active {
            width: 49px;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            float: left;
            background: url(./img/btn.png);
            margin-top: 14px;
            text-align: center;
            cursor: pointer;
        }

        .btn_active {
            background: url(./img/btn.png) -49px 0px;
        }

        .poi {
            width: 570px;
            height: 41;
            padding-top: 12px;
            float: left;
            position: relative;
        }

        .poi_note {
            width: 63px;
            line-height: 26px;
            float: left;
        }

        #poi_cur {
            width: 160px;
            height: 22px;
            margin-right: 10px;
            margin-top: 3px;
            line-height: 26px;
            float: left;
            text-align: center;
        }

        #addr_cur {
            width: 260px;
            height: 22px;
            margin-right: 5px;
            margin-top: 3px;
            line-height: 26px;
            float: left;
            text-align: center;
        }

        .btn_copy {
            width: 49px;
            height: 24px;
            background: url(../img/btn_cpoy.png) 0px 0px;
            float: left;
        }

        .already {
            width: 52px;
            line-height: 26px;
            padding-left: 5px;
            float: left;
            color: red;
            display: none;
        }

        .info_list {
            margin-bottom: 5px;
            cleat: both;
            cursor: pointer;
        }

        #txt_pannel {
            height: 500px;
        }


        .hide {
            display: none;
        }

        #bside_rgiht {
            width: 631px;
            height: 530px;
            margin-left: 0px;
            border-left: 1px solid #5688CB;
            float: left;
            font-size: 12px;
        }

        #container {
            width: 625px;
            height: 520px;
            border: 5px solid #fff;
        }

        #no_value {
            color: red;
            position: relative;
            width: 200px;
        }
    </style>
    <script src="~/Scripts/artdialog/dialog-plus-min.js"></script>
    <script>
        var api = top.dialog.get(window); //获取父窗体对象
        //页面加载完成执行
        $(function () {
            //设置按钮及事件
            api.button([{
                value: '确定',
                callback: function () {
                    $(api.data).parents("body").find("#txtYPoint").val($("#poi_cur_latitude").val());
                    $(api.data).parents("body").find("#txtXPoint").val($("#poi_cur_longitude").val());
                },
                autofocus: true
            }, {
                value: '取消',
                callback: function () { return true; }
            }
            ]);
        });
    </script>
</head>


<body class="dialogbody">
    <div style="position:relative;">
        <div style="height:53px;">            
            <div class="poi">
                <div class="poi_note">当前坐标：</div>
                <input type="text" id="poi_cur_longitude" />
                <input type="text" id="poi_cur_latitude" />
            </div>
        </div>
        <div id="main">
            <div id="tooles">
                <div id="cur_city">
                    <span class="change_city"><span id="level">当前缩放等级：10</span></span>                    
                </div>

            </div>
            
            <div id="bside_rgiht">
                <div id="container"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        var container = document.getElementById("container");
        var map = new qq.maps.Map(container, {
            zoom: 10

        }),
            label = new qq.maps.Label({
                map: map,
                offset: new qq.maps.Size(15, -12),
                draggable: false,
                clickable: false
            }),
            markerArray = [],
            //curCity = document.getElementById("cur_city"),
            //btnSearch = document.getElementById("btn_search"),
            bside = document.getElementById("bside_left"),
            url, query_city,
            cityservice = new qq.maps.CityService({
                complete: function (result) {
                    map.setCenter(result.detail.latLng);
                }
            });
        map.setOptions({
            draggableCursor: "crosshair"
        });

        $(container).mouseenter(function () {
            label.setMap(map);
        });
        $(container).mouseleave(function () {
            label.setMap(null);
        });

        qq.maps.event.addListener(map, "mousemove", function (e) {
            var latlng = e.latLng;
            label.setPosition(latlng);
            label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));
        });

        var url3;
        qq.maps.event.addListener(map, "click", function (e) {
            document.getElementById("poi_cur_latitude").value = e.latLng.getLat().toFixed(6);
            document.getElementById("poi_cur_longitude").value = e.latLng.getLng().toFixed(6);
            url3 = encodeURI("//apis.map.qq.com/ws/geocoder/v1/?location=" + e.latLng.getLat() + "," + e.latLng.getLng() + "&key=K76BZ-W3O2Q-RFL5S-GXOPR-3ARIT-6KFE5&output=jsonp&&callback=?");
            $.getJSON(url3, function (result) {
                if (result.result != undefined) {
                    //document.getElementById("addr_cur").value = result.result.address;
                } else {
                    //document.getElementById("addr_cur").value = "";
                }

            })
        });

        qq.maps.event.addListener(map, "zoom_changed", function () {
            document.getElementById("level").innerHTML = "当前缩放等级：" + map.getZoom();
        });
    </script>
</body>
</html>
